<template>
  <div class="detail-bottom-bar">
    <div class="bottom-left">
      <div>
        <span class="icon service"></span>
        <span>客服</span>
      </div>
      <div>
        <span class="icon shop"></span>
        <span>店铺</span>
      </div>
      <div>
        <span class="icon collect"></span>
        <span>收藏</span>
      </div>
    </div>
    <div class="bottom-right">
      <div class="addCart" @click="addCart">加入购物车</div>
      <div class="shopping">购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailBottomBar',
  props: {},
  data () {
    return {}
  },
  methods: {
    addCart () {
      this.$emit('addCart')
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
.detail-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 49px;
  background-color: #f8f1f1;
  text-align: center;
  font-size: 14px;

  display: flex;

  > div {
    flex: 1;
    display: flex;
  }

  // 左
  .bottom-left {
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    // 精灵图的公共样式
    .icon {
      display: block;
      width: 22px;
      height: 22px;
      // 这个样式现在还看不懂
      margin: 0 0 3px;
      background: url("~assets/images/detail/detail_bottom.png") 0 0/100%;
    }

    // 客服
    .service {
      background-position: 0 -54px;
    }

    // 店铺
    .shop {
      background-position: 0 -98px;
    }

    // 收藏
    .collect {
      background-position: 0 -148px;
    }
  }

  // 右
  .bottom-right {
    line-height: 49px;

    div {
      flex: 1;
    }

    .addCart {
      background-color: #f1ce1c;
    }

    .shopping {
      color: #fff;
      background-color: #f77794;
    }
  }
}
</style>
